<template>
	<div>
		<component :is="component" :room_id="this.room_id" :eng_name="this.eng_name" v-if="component" />
	</div>
</template>

<script>
	import DetailSkeletonLoading from '@/components/SkeletonLoading/detailLoading'
	import RoomDefault from '@/views/detail/templates/room_default'
	export default{
		name:'dynamicTemplate',
		components:{
			RoomDefault,
			DetailSkeletonLoading
		},
		props:{
			type:{
				type:String
			},
			room_id:{
				type:String
			},
			eng_name:{
				type:String
			}
		},
		data(){
			return{
				component:null
			}
		},
		methods: {
			loader() {
			  if (!this.type) {
				  return () => Promise.reject()
			  }
			  return () => import(`@/views/detail/templates/room_${this.type}`)
			},
		},
		created() {
			this.loader()().then(()=>{
				this.component = () => import(`@/views/detail/templates/room_${this.type}`)
			}).catch((err)=>{
				console.log(err)
				this.component = () => import('@/views/detail/templates/room_default')
			})
		}
	}
</script>
<style lang="scss">
	.layer-loginout-xchat{
		width: 100%;
		height: 100%;
		color: #fff;
		background: none;
		.reason{
			position: absolute;
			top:50%;
			left: 50%;
			transform: translate3d(-50%,-50%,0);
			text-align: center;
			i{
				display: block;
				width: 158px;
				height: 42px;
				background:url(../../assets/images/reenter-1234tv.png) no-repeat;
				background-size: contain;
			}
		}
		&.layer-loginout-xchat-no-official{
			i{
				display: block;
				width: 204px;
				height: 60px;
				background:url(../../assets/images/deticateIp/logo.png) no-repeat;
				background-size: contain;
			}
		}
	}
</style>
